<template>
    <div>
        <van-nav-bar title="收藏" left-text="返回" left-arrow @click-left="onClickLeft" />
      
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad()"
                :immediate-check="false">
                <van-card :price="item.price" :desc="item.description" :title="item.title" :thumb="item.cover"
                    v-for="(item, index) in list" :key="index">
                    <template #bottom>
                        <div class="priceBottom">已收藏</div>
                    </template>
                    <template #footer>
                        <van-button round size="small" plain type="info" @click="canclecollect(item.id)">取消收藏</van-button>
                        <van-button round size="small" plain type="info" @click="toproduct(item.id)">查看详情</van-button>
                        <van-button round size="small" plain type="danger" @click="clickbuy(item.id)">去付款</van-button>
                    </template>
                </van-card>
            </van-list>
       
    </div>
</template>
<script>
export default {
    data() {
        return {
            orderlist: '',
            loading: false,
            finished: false,
            refreshing: false,
            total: '',
            list: [],
            collectlist: []
        }
    },
    methods: {
        onClickLeft() {
            this.$router.back()
        },
        canclecollect(id) {
            this.$dialog.confirm({ title: '取消收藏', message: '你是否真的取消收藏？' }).then(async () => {
                let res = await this.$frontaxios.post(this.$front.delUserCollect, { 'columnid': id });
                if (res.code == 1) {
                    this.$toast.success('取消收藏成功');
                    this.onLoad();
                } else {
                    this.$toast.fail('取消收藏失败');
                }
            });
        },
        toproduct(id) {
            this.$router.push({ name: "product", query: { id } })
        },
        clickbuy(id) {
            //购买
            if (isWeixin()) {
                this.toOrder(id);
            } else {
                //html5浏览器
                this.$dialog.alert({ title: '温馨提示', message: '请在微信客户端打开此页面支付购买' });
            }
        },
        toOrder(id) {
            let domainname = this.$route.params.domainname;
            let FrontUrl = window.location.protocol + '//' + window.location.host;
            const nexturl = FrontUrl + `/xuejing/order/${domainname}?id=${id}`; //跳转到下一个页面的地址http://192.168.2.11/#/xuejing/order/test1?id=8
            let url = this.$front.getWeiXinOpenId + `?nexturl=${encodeURIComponent(nexturl)}`; //请求获得openid并存入到服务器的Cache当中
            window.location.href = url;
        },
        async getCollectList() {
            let query = {
                page: 1,
                limit: 4,
                keyword: ''
            };
            query.page = this.page;
            let res = await this.$frontaxios.post(this.$front.getCollectList, query);
            console.log(res);
            if (res.code == 1) {
                this.loading = false;
                this.collectlist = res.data.collectlist;
                this.total = res.data.total;
            } else {
                console.log('没有获取到全部的订单');
            }
        },
        async onLoad() {
            // if (this.refreshingall) {
            //     this.list = [];
            //     this.refreshing = false;
            // }
            await this.getCollectList();
            this.list.push(...this.collectlist);
            // this.page++;
            // this.loading = false; //不加载了，滚动底会变为true
            // if (this.list.length >= this.total) {
            //     this.finished = true; //数据全部加载完设为true
            // }
        },
        // onRefresh() {
        //     // 清空列表数据
        //     this.finished = false;

        //     // 重新加载数据
        //     // 将 loadingall 设置为 true，表示处于加载状态
        //     this.loading = true;
        //     this.page = 1;
        //     this.onLoad();
        //     this.$toast.success('刷新成功');
        // }
    },
    created() {
        this.onLoad();
    }
}
</script>
<style lang='less' scoped></style>
